import React, { Component } from 'react'

export default class Mouse extends Component {
  constructor () {
    super()

    this.state = {
      position: {
        x: 0,
        y: 0
      }
    }
  }

  move = e => {
    this.setState({
      position: {
        x: e.clientX,
        y: e.clientY
      }
    })
  }

  componentDidMount () {
    window.addEventListener('mousemove', this.move)
  }

  componentWillUnmount () {
    window.removeEventListener('mousemove', this.move)
  }

  render () {
    return (
      <div>
        Mouse
        <p>
          mouse position {this.state.position.x} , {this.state.position.y}
        </p>
      </div>
    )
  }
}
